<template>
	<view class="search-box">
		<slot name="leftSlot" v-if="leftSlot"></slot>
		<u-search shape="round" v-model="keyword" :showAction="false" :placeholder="placeholder" @blur='searchFocus' :disabled='disabled'
			:pageTitle="pageTitle" @search="search" :bgColor="bgColor"></u-search>
	</view>
</template>

<script>
export default {
	name: 'Search',
	props: {
		pageTitle: {
			type: String,
			default: '搜索页面的导航'
		},
		value: {
			type: String,
			default: ''
		},
		placeholder: {
			type: String,
			default: '请输入'
		},
		storageName: {
			type: String,
			default: 'searchStorage'
		},
		showHistoryBox: {
			type: Boolean,
			default: true
		},
		disabled:{
			type: Boolean,
			default: '',
		},
		backColor: {
			type: String,
			default: '#fff'
		},
		bgColor: {
			type: String,
			default: '#fff'
		},
		leftSlot: {
			type: Boolean,
			default: false
		},
	},
	data() {
		return {
			keyword: ''
		}
	},
	watch: {
		value: {
			handler(newVal, oldVal) {
				this.keyword = newVal
			},
			deep: true,
			immediate: true
		},

	},

	created() {

	},

	methods: {
		searchFocus() {
			this.$emit('searchFocus', this.keyword);
			// const urlParams = {
			// 	title: this.pageTitle,
			// 	placeholder: this.placeholder,
			// 	storageName: this.storageName,
			// 	showHistoryBox: this.showHistoryBox
			// }
			// const params = encodeURIComponent(JSON.stringify(urlParams))
			// const path = `/subPages/componentPages/searchPage?params=${params}`
			// uni.navigateTo({
			// 	url: path
			// })
		},
		search() {
			this.$emit('search',this.keyword);
		}
	}
}
</script>
<style lang="scss" scoped>
.search-box {
	padding: 30rpx 35rpx;
	height: 65px;
	background-color: rgba(194, 126, 21, 1);
	display: flex;
}
</style>